<!-- 焦点图轮播 -->
<div id="heroCarousel" class="carousel slide hero-carousel custom-carousel" data-bs-ride="carousel">
    <!-- 指示器 -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>

    <!-- 轮播内容 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/seed/hero1/1200/500" alt="年度社交峰会现场" class="carousel-img">
            <div class="carousel-caption d-none d-md-block">
                <h3 class="carousel-title">2023年度社交峰会圆满结束</h3>
                <p class="carousel-text">超过5000名用户参与，探讨社交网络的未来发展与创新方向，共同见证平台新功能发布。</p>
                <button class="btn btn-primary">查看详情</button>
            </div>
        </div>

        <div class="carousel-item">
            <img src="https://picsum.photos/seed/hero2/1200/500" alt="社区公益活动" class="carousel-img">
            <div class="carousel-caption d-none d-md-block">
                <h3 class="carousel-title">社区公益活动月正式启动</h3>
                <p class="carousel-text">参与社区公益活动，累积公益时长可兑换专属勋章和平台特权，让我们一起传递正能量。</p>
                <button class="btn btn-primary">立即参与</button>
            </div>
        </div>

        <div class="carousel-item">
            <img src="https://picsum.photos/seed/hero3/1200/500" alt="新功能上线" class="carousel-img">
            <div class="carousel-caption d-none d-md-block">
                <h3 class="carousel-title">全新社交互动功能上线</h3>
                <p class="carousel-text">引入实时互动、内容共创等新功能，让你的社交体验更加丰富多元，连接更紧密。</p>
                <button class="btn btn-primary">了解新功能</button>
            </div>
        </div>
    </div>

    <!-- 控制按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
